/**
 * Created by wuli等等 on 2017/2/14.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Switch,
    TouchableNativeFeedback,
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';
import Orders from './../scenes/Orders';
import Recent from './../scenes/Recent';
import Comments from './../scenes/Comments';
import Collections from './Collections';
import Header from '../component/Header';
import ToMore from '../component/ToMore';


export default class User extends Component {
    constructor(props) {
        super(props);
        this.state = {
            switchVaule:false
        }
    }

    render() {
        const { navigator } = this.props;
        return (
            <View style={styles.container}>
               <Header text="个人中心" />
                <View style={styles.userInfo}>
                    <View style={styles.icon}>
                    <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
                           style={styles.img} />
                    </View>
                    <View style={styles.editContanier}>
                        <View style={styles.innerEdit}>
                                <Text  style={styles.name}>陈货主</Text>
                                <Text  style={styles.edit}>查看或编辑个人资料</Text>
                        </View>
                    </View>
                    <ToMore/>
                </View>

                <View style={styles.container2}>
                    <View style={styles.info}>
                        <View style={styles.icons}>
                            <Icon name="star" size={23} />
                        </View>
                        <View style={styles.container3}>
                            <View style={styles.myInfo}>
                                <Text>我的收藏</Text>
                            </View>
                            <ToMore component = { Collections } navigator = { navigator } />
                        </View>
                    </View>
                    <View style={styles.info}>
                        <View style={styles.icons}>
                            <Icon name="comment" size={23} />
                        </View>
                        <View style={styles.container3}>
                            <View style={styles.myInfo}>
                                <Text>我的评价</Text>
                            </View>
                             <ToMore  component = { Comments } navigator = { navigator }/>
                        </View>
                    </View>
                    <View style={styles.info}>
                        <View style={styles.icons}>
                            <Icon name="clock-o" size={23} />
                        </View>
                        <View style={styles.container3}>
                            <View style={styles.myInfo}>
                                <Text>最近浏览</Text>
                            </View>
                            <ToMore component = { Recent } navigator = { navigator }/>
                        </View>
                    </View>

                    <View style={styles.info}>
                        <View style={styles.icons}>
                            <Icon name="book" size={23} />
                        </View>
                        <View style={styles.container4}>
                            <View style={styles.myInfo}>
                                <Text>全部订单</Text>
                            </View>
                            <ToMore component = { Orders } navigator = { navigator }/>
                        </View>
                    </View>
                </View>

                <View style={styles.settingContainer}>
                    <View style={styles.info}>
                        <View style={styles.icons}>
                            <Icon name="moon-o" size={23} />
                        </View>
                        <View style={styles.container3}>
                            <View style={styles.myInfo}>
                                <Text>夜间模式</Text>
                            </View>
                            <View style={styles.night}>
                                <Switch
                                    value={(this.state.switchValue) || false}
                                    onValueChange={(value) => {this.setState({switchValue: value}) }}
                                    />
                            </View>
                        </View>
                    </View>
                    <View style={styles.info}>
                        <View style={styles.icons}>
                            <Icon name="cog" size={23} />
                        </View>
                        <View style={styles.container3}>
                            <View style={styles.myInfo}>
                                <Text>设置</Text>
                            </View>
                            <ToMore/>
                        </View>
                    </View>
                    <View style={styles.info}>
                        <View style={styles.icons}>
                            <Icon name="bookmark-o" size={23} />
                        </View>
                        <View style={styles.container4}>
                            <View style={styles.myInfo}>
                                <Text>版本信息</Text>
                            </View>

                            <ToMore/>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

const styles=StyleSheet.create({
    contanier:{
    },
    userInfo:{
        height:80,
        flexDirection:'row',
        backgroundColor:'#ffffff',
        marginTop:15,
        borderBottomWidth:1,
        borderBottomColor:"#CCCCCC",
    },
    icon:{
        flex:4,
        width:80,
        height:80,
        justifyContent: 'center'
    },
    img:{
        width:60,
        height:60,
        marginLeft:25,
        borderRadius:100
    },
    editContanier:{
        flex:8,
        justifyContent: 'center',
    },
    innerEdit:{
        marginLeft:-15,
    },
    name:{
        color:'#000000',
        fontSize:15,
        fontFamily:'Helvetica Neue'
    },
    edit:{
        fontSize:12,
        color:'#555'
    },
    btn:{
        flex:1,
        justifyContent: 'center',
    },
    container2:{
        backgroundColor:'#ffffff',
        height:180,
        marginTop:15,
        borderColor:'#CCCCCC',
        borderWidth:1
    },
    info:{
        flex:1,
        flexDirection:'row',
        justifyContent: 'center',
    },
    icons:{
        flex:1,
        paddingLeft:20,
        justifyContent: 'center'
    },
    container3:{
        flex:7,
        borderBottomWidth:1,
        borderBottomColor:"#CCCCCC",
        flexDirection:'row',
    },
    container4:{
        flex:7,
        flexDirection:'row',
    },
    myInfo:{
        flex:9,
        justifyContent: 'center'
    },
    myIcon:{
        flex:1,
        justifyContent: 'center'
    },
    settingContainer:{
        backgroundColor:'#ffffff',
        height:135,
        marginTop:15,
        borderColor:'#CCCCCC',
        borderWidth:1
    },
    night:{
        flex:2,
        justifyContent: 'center'
    },
});
